<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 24 24"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-fill="currentColor" d="M17.074 0C15.18 0 13.37.795 12 2.208 10.633.795 8.822 0 6.93 0 3.044 0 0 3.305 0 7.528c0 4.932 3.826 8.72 9.618 14.454l1.86 1.801a.74.74 0 0 0 1.047 0l1.601-1.548.256-.253C20.174 16.248 24 12.46 24 7.527 24 3.305 20.959 0 17.074 0ZM7.129 1.617c1.702.058 3.292.967 4.405 2.39l.464.59.465-.59c1.117-1.423 2.703-2.332 4.405-2.39 3.218-.114 5.672 2.467 5.672 5.911 0 1.013-.215 1.987-.609 2.964h-6.168l-.567-1.308a.852.852 0 0 0-.755-.526.84.84 0 0 0-.753.533L12.29 12.33l-1.757-4.068c-.144-.334-.435-.584-.77-.597-.32-.013-.602.156-.767.448l-1.357 2.386H2.072c-.397-.977-.611-1.958-.611-2.97-.003-3.448 2.45-6.026 5.668-5.912Zm6.28 19.163-.884.86a.738.738 0 0 1-1.05 0l-.884-.86c-3.447-3.412-6.162-6.1-7.705-8.668h5.56l1.21-2.132 1.825 4.22c.15.35.465.568.814.568h.003c.353 0 .664-.22.814-.575L14.45 11.2l.365.844 6.338.003c-1.537 2.585-4.264 5.289-7.743 8.733Z" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Hipaa extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
